{block script}
<script src="{$basePath}/www/libs/js/videojs/video.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var dimensions = new Array(
    { width: "730", height: "412" },
    { width: "597", height: "337"},
    { width: "450", height: "254"}
  );
  
  var myPlayer = videojs('video_nanastroj');
  myPlayer.on('error', function(error) {
//    console.log(error);
  });
  
  myPlayer.ready(function(){
    recalculateDimensions();
  });
  
  $(window).resize(function(){
      recalculateDimensions();
  });
      
  function recalculateDimensions(){
    var width = $(window).width();
    console.log(width);
    if(width > 1183){
      setDimensions(0);
    }else if(width > 991){
      setDimensions(1);
    }else{
      setDimensions(2);
    }
  }
  
  function setDimensions(index){
    myPlayer.width(dimensions[index].width);
    myPlayer.height(dimensions[index].height);
  }
  
  videojs.addLanguage('cs', {
      "Play": "Hrát",
      "Pause": "Pauza",
      "Current Time": "Čas",
      "Duration Time": "Délka",
      "Remaining Time": "Zbývá",
      "Stream Type": "Typ streamu",
      "LIVE": "Live",
      "Loaded": "Načteno",
      "Progress": "Progres",
      "Fullscreen": "Na celou obrazovku",
      "Non-Fullscreen": "Zmenšit",
      "Mute": "Zamutovano",
      "Unmuted": "Hraje",
      "Playback Rate": "Rate",
      "Subtitles": "Titulky",
      "subtitles off": "titulky vypnuty",
      "Captions": "",
      "captions off": "",
      "Chapters": "",
      "You aborted the video playback": "Přerušil jste přehrávání",
      "A network error caused the video download to fail part-way.": "Chyba sítě...",
      "The video could not be loaded, either because the server or network failed or because the format is not supported.": "Video nelze přehrát z důvodu chyby sítě nebo nepodporovaného formátu.",
      "The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "Videoo nelze přehrát, protože Váš prohlížeč epodporuje zvolený formát.",
      "No compatible source was found for this video.": "Video nelze přehrát z důvodu nekompatibilního zdroje."
    });
});
</script>
{/block}

{block css}
<link href="{$basePath}/www/libs/js/videojs/video-js.css" rel="stylesheet">
{include #parent}
{/block}

{block content}

<div class="col-sm-8 lesson-left-column">
  <div class="row lesson-detail">
    <div class="video col-md-12">
      <video id="video_nanastroj" class="video-js vjs-default-skin"
             controls preload="auto"
             poster="{$basePath}/content/lessons/{$video->webalize_title}/images/{$video->webalize_title}.jpg"
             data-setup='{"example_option":true}'>
        <source src="{$basePath}/content/lessons/{$video->webalize_title}/videos/{$video->webalize_title}.mp4" type="video/mp4">
        <source src="{$basePath}/content/lessons/{$video->webalize_title}/videos/{$video->webalize_title}.webm" type="video/webm">
        <p>Video není dostupné, zřejmě Váš prohlížeč nepodporuje HTML 5</p>
      </video>
    </div>
        
    <div class="col-md-8">			
        <h1>{$video->title}</h1>
        <p>
          {$video->description}
        </p>
    </div>

    <div class="col-md-4">
        <span class="info duration">{$video->duration} min</span>
        <span class="info level">{$video->level}</span>   
        <span class="info style">{$video->style}</span>   
        <span class="info comments">0</span>   
        <span class="info views">{$video->views}</span>   
    </div>
  </div>

  <div class="row comments-container">
    <h2>komentáře</h2>
    {control comment}
  </div>
</div>


<div class="col-sm-4 related-videos">
  {foreach $relatedVideos as $relatedVideo}
  <div class="row video-container"> 
    <div class="col-xs-6 col-sm-12 col-lg-6 video-image">
      <a href="{link Default:lessonDetail}/{$relatedVideo->webalize_title}">
        <img src="{$basePath}/content/lessons/{$relatedVideo->webalize_title}/images/{$relatedVideo->webalize_title}.jpg">
      </a>
      <span>{$relatedVideo->duration}</span>
    </div>
    <div class="col-xs-6 col-sm-12 col-lg-6 video-data">
      <a href="{link Default:lessonDetail}/{$relatedVideo->webalize_title}">
        <h3>{$relatedVideo->title}</h3>
      </a>
      <span class="level">level {$relatedVideo->level}</span>
      <span class="style">&nbsp;{$relatedVideo->style}</span>
      <span class="comments">0</span>
      <span class="views">{$relatedVideo->views}</span>
    </div>
  </div>   
  {/foreach}
</div>
{/block}


